<div class="auth" ng-style="{ 'background-image': 'url('+uiCustomization.pattern.url+'), url('+(uiCustomization.background.url || 'images/login.webp') +')' }">
    <div class="auth__container">
        <div class="auth__head">
            <img class="auth__logo" ng-src="{{ uiCustomization.loginScreenLogo_custom.url || uiCustomization.loginScreenLogo_default.url }}" fallback-src="{{ uiCustomization.loginScreenLogo_default.url }}" alt="Login screen logo image">
            <h1 class="auth__title">{{ 'platform.blades.forgotpassword.title' | translate }}</h1>
        </div>
        <div class="auth__content">
            <form class="forgot-password" novalidate ng-submit="ok()" name="thisForm" ng-if="!isLoading">
                <div class="vc-input" ng-class="{'vc-input--error': errors}">
                    <label class="vc-input__label"> {{ 'platform.blades.forgotpassword.labels.login' | translate }} <span class="vc-input__asterisk">*</span> </label>
                    <div class="vc-input__container">
                        <input class="vc-input__field" type="text" name="login" ng-model="viewModel.userName" placeholder="{{ 'platform.blades.forgotpassword.placeholders.login-or-email' | translate }}" required autofocus />
                    </div>
                    <div ng-if="!errors" class="vc-input__message" ng-bind="'platform.blades.forgotpassword.labels.description' | translate"></div>
                    <div ng-if="errors" class="vc-input__message">{{ errors.join() }}</div>
                    <div ng-if="succeeded" class="vc-input__message"><div ng-bind="'platform.blades.forgotpassword.labels.success' | translate"></div></div>
                </div>
                <div class="forgot-password__buttons">
                    <button ng-if="!succeeded" ui-sref="loginDialog" ng-disabled="isLoading" class="vc-button vc-button--outlined forgot-password__button">{{ 'platform.blades.forgotpassword.labels.back' | translate }}</button>
                    <button ng-if="!succeeded" type="submit" ng-disabled="thisForm.$invalid || isLoading || nextRequestAt" class="vc-button forgot-password__button">{{ 'platform.blades.forgotpassword.labels.submit' | translate }}</button>
                    <button ng-if="succeeded" class="vc-button forgot-password__button" ng-click="close()">{{ 'platform.commands.ok' | translate }}</button>
                </div>
            </form>
            <div class="vc-loader" ng-if="isLoading">
                <div class="vc-loader__line"></div>
            </div>
        </div>
    </div>
</div>
